<template>
    <div class="flagView">


        <van-sticky>
            <van-nav-bar title="全部锦旗" left-arrow @click-left="onClickLeft" />
            <div class="flagBtn">
                <div class="flagBtnItem"
                    :style="[flagI == v.name ? { backgroundColor: '#e6f4ff', color: '#1677ff' } : { backgroundColor: '' }]"
                    v-for="v in flagLs" :key="v.id" @click="changItem(v.name)">
                    {{ v.name }}
                </div>
            </div>

        </van-sticky>

        <div class="flagBack">
            <div class="flagItems" v-for="f in flagData" :key="f._id">
                <div style="line-height: 30px;">
                    <p class="font-family">{{ f.name }}</p>
                    <p style="font-size: 12px;color: #7f7f7f;">{{ f.date }}</p>
                </div>
                <div class="flagImg">
                    <p class="u7122">{{ f.title }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

const onClickLeft = () => history.back();
const flagI = ref('全部锦旗')
const flagData = ref()
const titleText = ref()

const changItem = (name) => {
    flagI.value = name
    if (name == '全部锦旗') {
        titleText.value = ''
    } else {
        titleText.value = name
    }
    getFlags()
}


const flagLs = [
    {
        name: '全部锦旗',
        id: 1
    },
    {
        name: '德医双馨',
        id: 2
    },
    {
        name: '妙手回春',
        id: 3
    },
    {
        name: '医德高尚',
        id: 4
    },
    {
        name: '药到病除',
        id: 5
    },
]

onMounted(() => {
    getFlags()
})

const getFlags = async () => {
    console.log(111)
    console.log(titleText.value)
    let { data: { flag } } = await axios.get('http://127.0.0.1:3000/Flag', {
        params: {
            title: titleText.value
        }
    })
    flagData.value = flag
}




</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.flagView {
    width: 100%;
    min-height: 100vh;
    background-color: #f2f2f2;
    padding-bottom: 50px;

    .flagBtn {
        // height: 50px;
        background-color: #ffffff;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 5px 16px 5px 0;

        .flagBtnItem {
            width: 81px;
            height: 33px;
            background: #F5F5F5;
            border-radius: 16px;
            line-height: 33px;
            text-align: center;
            box-sizing: border-box;

            display: inline-block;
            text-align: center;
            font-size: 12px;
            color: #333333;
            background-color: #f2f2f2;
            margin-left: 16px;
            border-radius: 5px;
            text-align: center;
            overflow: auto;
        }
    }

    .flagBack {


        margin-top: 10px;
        padding: 0 16px;
        box-sizing: border-box;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 0 16px;

        .flagItems {
            height: 140px;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            .flagImg {
                width: 100px;
                height: 140px;
                background-image: url('	https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7120.png');
                background-size: cover;
            }
        }
    }
}
</style>